<template>
  <!-- 可移动元素弹窗-->
  <div
    class="portability-zzc"
    :class="{ cancel: !isMask }"
    :style="{ zIndex: zIndex }"
  >
    <div
      class="portability"
      :class="{ cancel: !isBgColor }"
      :style="`top:${top};left:${left}`"
      ref="targetEle"
    >
      <div
        class="portability-top-box"
        :class="{ cancel: !isBgColor }"
        :style="`background:${backgroundTop};color:${colorTop};background:${bgColor}`"
        @mousedown.self="dragDrop"
      >
        {{ title }}
        <p
          class="iconfont icon-JXC-guanbi portability-off"
          @click="closePortability"
        ></p>
      </div>
      <div class="portability-center-box" :class="{ isPadding: !isPadding }">
        <slot>自定义模板内容插槽</slot>
        <div class="bottom-btn">
          <span class="swh-ok-btn" @click="confirm">确定</span>
          <span class="swh-off-btn" @click="closePortability">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { moveEle } from '@/utils/common.js';
export default {
  name: 'SwhDragBox',
  props: {
    title: {
      type: String,
      default: '可移动弹窗',
      explain: '移动框顶部标题',
      otherVal: '---'
    },
    // 默认顶部距离
    top: {
      type: String,
      default: '50px',
      explain: '距离浏览器顶部距离',
      otherVal: '---'
    },
    left: {
      type: String,
      default: '50%',
      explain: '距离浏览器左侧距离，自动水平居中偏移',
      otherVal: '---'
    },
    zIndex: {
      //多个弹窗控制层级
      type: Number,
      default: 2,
      explain: '移动框层级',
      otherVal: '---'
    },
    isMask: {
      //是否显示遮罩层
      type: Boolean,
      default: false,
      explain: '是否显示遮罩层',
      otherVal: true
    },
    // 容器是否有内边距
    isPadding: {
      type: Boolean,
      default: true,
      explain: '是否显示内边距',
      otherVal: false
    },
    // 是否显示背景颜色
    isBgColor: {
      type: Boolean,
      default: true,
      explain: '是否显示背景颜色',
      otherVal: false
    },
    closePortability: {
      type: Function,
      explain: '关闭移动框事件'
    },
    confirm: {
      type: Function,
      explain: '点击确认事件'
    },
    backgroundTop: {
      type: String,
      explain: '移动框背景颜色设置',
      otherVal: '#fff'
    },
    colorTop: {
      type: String,
      explain: '移动框字体颜色设置',
      otherVal: '#000'
    },
    bgColor: {
      type: String,
      explain: '顶部背景颜色',
      otherVal: '#fff'
    }
  },

  setup(props, ctx) {
    const data = reactive({
      targetEle: null //保存要移动的元素
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    // 按下弹窗移动区域
    const dragDrop = (operationEle) => {
      // 要移动元素和可移动区域
      moveEle(data.targetEle, operationEle); //移动元素方法
    };
    const closePortability = () => {
      ctx.emit('closePortability');
    };
    const confirm = () => {
      ctx.emit('confirmDarg');
    };
    return {
      confirm,
      closePortability,
      dragDrop,
      ...toRefs(data)
    };
  }
};
</script>
<style lang="less" scoped>
.portability-zzc {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  &.cancel {
    height: auto;
    width: auto;
  }
  .portability {
    position: fixed;
    // background: #fff;
    border-radius: 5px;
    overflow: hidden;
    left: 50%;
    transform: translate(-50%);
    z-index: 777;
    box-shadow: 0px 0px 5px 0px rgba(104, 104, 104, 0.5);
    // border: 1px solid #ddd;
    &.cancel {
      background: none;
    }
    .portability-top-box {
      height: 40px;
      width: 100%;
      background: @HSE;
      // border-bottom: 1px solid rgb(248, 248, 248);
      cursor: move;
      line-height: 40px;
      padding-left: 20px;
      box-sizing: border-box;
      text-align: center;
      font-size: 16px;
      &.cancel {
        background: none;
        border-bottom: none;
        color: #fff;
      }
      .portability-off {
        float: right;
        line-height: 40px;
        margin-right: 20px;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          color: @TSA;
        }
      }
    }
    .portability-center-box {
      padding: 10px 20px;
      background: #fff;
      .bottom-btn {
        overflow: hidden;
        padding: 0 10px 15px 0;
        .swh-ok-btn {
          background: #409eff;
          border-color: #409eff;
          color: #fff;
          margin: 0 5px;
          height: 32px;
          width: 56px;
          line-height: 30px;
          transition: 0.3s;
          float: right;
          cursor: pointer;
          text-align: center;
          box-sizing: border-box;
          font-size: 12px;
          border-radius: 4px;
          &:hover {
            opacity: 0.8;
          }
        }
        .swh-off-btn {
          margin: 0 5px;
          height: 32px;
          width: 56px;
          line-height: 30px;
          transition: 0.3s;
          float: right;
          cursor: pointer;
          background: #fff;
          border: 1px solid #dcdfe6;
          color: #666;
          text-align: center;
          box-sizing: border-box;
          font-size: 12px;
          border-radius: 4px;
          &:hover {
            color: #409eff;
            border-color: #c8e5ff;
            background-color: #e8f2fe;
          }
        }
      }
    }
    .isPadding {
      padding: 0;
    }
  }
}
</style>
